<template>
  <div class="videoPic">
    <div class="pic">
      <p>图片</p>
      <div>
        <el-upload
          :action="uploadUrl"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          size="mini"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" size="mini">
          <img width="100%" :src="dialogImageUrl" alt>
        </el-dialog>
      </div>
    </div>
    <div class="video">
      <p>视屏</p>
      <div>
        <el-upload :action="uploadUrl" list-type="picture-card" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" >
          <video  v-if="videoForm.Video !='' && videoFlag == false" :src="videoForm.Video" class="avatar" controls="controls" >您的浏览器不支持视频播放</video>
          <i v-else-if="videoForm.Video =='' && videoFlag == false" class="el-icon-plus avatar-uploader-icon" ></i>
          <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;" ></el-progress>
        </el-upload>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
      videoForm:{Video:'',videoUploadId:''},
      videoFlag:false,
      videoUploadPercent:0
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if ([ "video/mp4","video/ogg","video/flv","video/avi", "video/wmv","video/rmvb"].indexOf(file.type) == -1) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过10MB哦!");
        return false;
      }
    },
    handleVideoSuccess(res, file) {//获取上传图片地址
        this.videoFlag = false;
        this.videoUploadPercent = 0;
        if(res.status == 200){
            this.videoForm.videoUploadId = res.data.uploadId;
            this.videoForm.Video = res.data.uploadUrl;
        }else{
            this.$message.error('视频上传失败，请重新上传！');
        }
    },
  }
};
</script>
<style lang="less" scoped>
.videoPic {
  .pic p,
  .video p {
    color: #000;
    font-size: 14px;
    line-height: 50px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 5px;
  }
}
</style>

